<template>
  <div class="page">
      <el-form :model="timeValidateForm" ref="timeValidateForm" label-width="120px">
        <el-card>
          <h3>一般设置</h3>
          <el-row>
            <el-col :span="6">
              <el-form-item  label="当前系统时间">
                <span>Fri Jun 23 04:46:47 2023</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="time" label="更新间隔（秒）">
                <div class="l-f">
                  <el-input-number v-model="timeValidateForm.time" :min="0" :max="999999"></el-input-number>
                  <span class="l-mg-left10">s</span>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="unit" label="时间单位数">
                <div class="l-f">
                  <el-input v-model="timeValidateForm.unit"></el-input>
                  <el-tooltip class="item" effect="dark" content="空值为无效长度" placement="bottom">
                    <i class="el-icon-warning"></i>
                  </el-tooltip>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="时间进程看护" prop="status">
                <el-select v-model="timeValidateForm.status" placeholder="请选择时间进程看护">
                  <el-option label="启用" :value="1"></el-option>
                  <el-option label="禁用" :value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
        <el-card class="l-mg-top20">
          <h3>时间校对</h3>
          <el-form-item prop="offset" label="偏移量">
            <div class="l-f">
              <el-input-number v-model="timeValidateForm.offset" :min="0" :max="999999"></el-input-number>
              <span class="l-mg-left10">s</span>
            </div>
          </el-form-item>
        </el-card>
        <el-card class="l-mg-top20">
          <div class="l-f l-row-sb">
            <h3>时间服务器</h3>
            <el-button @click="addServer" type="primary" size="small" icon="el-icon-plus">添加</el-button>
          </div>
          <el-row v-for="(item, index) in timeValidateForm.servers" :key="item.key">
            <el-col :span="8">
              <el-form-item label="主机名：" 
              :prop="'servers.' + index + '.name'" 
              :rules="{
                required: true, message: '主机名不能为空', trigger: 'blur'
              }">
                <el-input v-model="item.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="端口：" 
              :prop="'servers.' + index + '.port'" 
              :rules="{
                required: true, message: '端口不能为空', trigger: 'blur'
              }">
                <el-input v-model="item.port"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" class="l-f l-row-c">
              <el-button size="small" type="danger" @click.prevent="removeServer(item)">删除</el-button>
            </el-col>
          </el-row>
        </el-card>
      </el-form>
      <div class="l-f l-row-c l-mg-top30">
        <el-button type="primary" @click="submitForm('timeValidateForm')" >保存&应用</el-button>
        <el-button type="primary" @click="submitForm('timeValidateForm')" >保 存</el-button>
      <el-button type="primary" >复 位</el-button>
    </div>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      timeValidateForm: {
        unit: '',
        time: 0,
        status: 1,
        offset: 0,
        servers: [{
          name: '',
          port: ''
        }]
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    removeServer(item) {
      var index = this.timeValidateForm.servers.indexOf(item)
      if (index !== -1) {
        this.timeValidateForm.servers.splice(index, 1)
      }
    },
    addServer() {
      this.timeValidateForm.servers.push({
        name: '',
        port: '',
        key: Date.now()
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.el-icon-warning {
  margin-left: 10px;
  font-size: 20px;
  color: #409EFF;
}
</style>